<template>
  <el-table
    :data="tableData"
    style="width: 100% , height:80">
    <el-table-column
      type="index"
      label="序号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="subjectName"
      label="所属学科"
      width="180">
    </el-table-column>
    <el-table-column
      prop="tagName"
      label="标签名称">
    </el-table-column>
    <el-table-column
      prop="username"
      label="创建者">
    </el-table-column>
    <el-table-column   label="创建日期">
    <template slot-scope="scope">
        <span>{{ scope.row.addDate | formatTime }}</span>
    </template>
    </el-table-column>
    <el-table-column
      prop="state"
      :formatter="formatter"
      label="状态"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作">
      <template slot-scope="scope">
          <el-button type="text" @click="isDisable(scope.row)">{{scope.row.state? '禁用' :'启用'}}</el-button>
          <el-button type="text" :disabled="scope.row.state === 1" @click="revamp(scope.row)">修改</el-button>
          <el-button type="text" :disabled="scope.row.state === 1" @click="delList(scope.row)">删除</el-button>
      </template>

    </el-table-column>
  </el-table>

</template>

<script>
// 按需导入枚举
import { status } from '@/api/hmmm/constants'
// 导入删除接口
import { remove, changeState, detail } from '@/api/hmmm/tags'
// list

// 导入格式化时间处理函数
import dayjs from 'dayjs'
// , remove
export default {
  name: 'tagsFrom',
  props: {
    tableData: {
      type: [Array],
      required: true
    },
    // 页码条数
    query: {
      type: Object,
      required: true
    }
  },
  filters: {
  // 格式化日期的方法
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    }
  },
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
  },
  methods: {
    // 编辑按钮
    revamp (data) {
      this.$emit('revamp', data)
    },

    // 处理枚举数据
    formatter (row, column, cellValue, index) {
      const obj = status.find(item => item.value === cellValue)
      return obj ? obj.label : '未知'
    },

    // 禁用按钮
    async isDisable (a) {
    //   console.log(a)
      const userInfo = await detail(a)
      //   console.log(userInfo)
      this.userInfo = userInfo.data
      //   console.log(this.userInfo)
      if (this.userInfo.state === 1) {
        this.userInfo.state = 0
        await changeState(this.userInfo)
        this.$emit('del')
        this.$message.success('已启用')
      } else {
        this.userInfo.state = 1
        await changeState(this.userInfo)
        this.$emit('del')
        this.$message.success('已禁用')
      }
    },

    // 删除按钮
    async delList (data) {
      if (this.tableData.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res === 'cancel') return this.$message('已取消删除')
      await remove(data)
      this.$message.success('删除成功')
      this.$emit('del')
    }
  }
}
</script>

<style>
.el-table{
    margin-top: 15px;
}
</style>
